<template>
  <a-spin :spinning="lodingSpinner">
    <div class="container">
      <!-- 左侧封面图片 -->
      <div class="left-side">
        <img :src="pageData.coverImg" alt="Cover Image" class="cover-image" />
      </div>
      <!-- 右侧内容 -->
      <div class="right-side">
        <!-- 上部数据展示文字 -->
        <div class="top-section">
          <h2>{{ pageData.title }}</h2>
          <p>{{ pageData.desc }}</p>
        </div>

        <!-- 中部 a-tabs 标签页 -->
        <div class="middle-section">
          <a-tabs v-model:activeKey="activeTab">
            <a-tab-pane key="publish" tab="发布为作品">
              <div
                class="tab-content-item"
                v-for="item in channelList"
                :key="item.id"
              >
                <a-qrcode
                  :value="item.channelUrl"
                  :size="100"
                  :style="{ marginRight: '10px' }"
                />
                <div class="tab-content-item-channel">
                  <div class="content-item-channel-top">
                    <div class="channel-name">{{ item.name }}</div>
                    <a-button
                      size="small"
                      type="primary"
                      danger
                      shape="round"
                      v-if="channelList.length > 1"
                      @click="deleteChannelHandel(item.id)"
                      >删除渠道</a-button
                    >
                  </div>
                  <div class="content-item-channel-bottom">
                    <a-input
                      readonly
                      :style="{ borderRadius: '20px', marginRight: '5px' }"
                      v-model:value="item.channelUrl"
                    />
                    <a-button shape="round" @click="coypHandle(item.channelUrl)"
                      >复制</a-button
                    >
                  </div>
                </div>
              </div>
            </a-tab-pane>
            <a-tab-pane key="template" tab="发布为模板">
              <div class="tab-content-item">
                <a-qrcode
                  :value="url"
                  :size="100"
                  :style="{ marginRight: '10px' }"
                />
                <div class="tab-content-item-channel">
                  <div class="content-item-channel-top">
                    <div class="channel-name">模板信息</div>
                  </div>
                  <div class="content-item-channel-bottom">
                    <a-input
                      readonly
                      :style="{ borderRadius: '20px', marginRight: '5px' }"
                      v-model:value="url"
                    />
                    <a-button shape="round" @click="coypHandle(url)"
                      >复制</a-button
                    >
                  </div>
                </div>
              </div>
            </a-tab-pane>
          </a-tabs>
        </div>

        <!-- 底部输入框与按钮 -->
        <div
          class="bottom-section"
          :style="{ justifyContent: activeTab === 'template' ? 'center' : '' }"
        >
          <template v-if="activeTab === 'publish'">
            <a-input
              :style="{
                borderRadius: '20px',
                marginRight: '5px',
                width: '220px',
              }"
              placeholder="请输入渠道名称"
              maxLength="12"
              v-model:value="channelName"
            />
            <a-button shape="round" type="primary" @click="createChannelHandel"
              >创建渠道</a-button
            >
          </template>
          <template v-else>
            <a-button
              type="primary"
              size="large"
              shape="round"
              @click="publishTemplate"
              >发布模板</a-button
            >
          </template>
        </div>
      </div>
    </div>
  </a-spin>
</template>

<script setup lang="ts">
import { computed, ref, watch } from 'vue'
import useEditorStore from '@/store/modules/editorStore'
import useGlobalStore from '@/store/modules/globalStore'
import {
  createChannelAPI,
  deleteChannelAPI,
  getChannelListAPI,
  publishWorkOrTemplateAPI,
} from '@/request/modules/work'
import type { ChannelList } from '@/request/types/workType'
import { nanoid } from 'nanoid'
import { message } from 'ant-design-vue'
import { copyToClipboard } from '@/helper'
defineOptions({
  name: 'PublishWorkTemplate',
})
const props = defineProps({
  workId: {
    type: String,
    required: true,
  },
  workUrl: {
    type: String,
    required: true,
  },
})
const globalStore = useGlobalStore()
const lodingSpinner = computed(() => globalStore.isLoading)
const openModal = defineModel()
const editorStore = useEditorStore()
const channelName = ref('')
const pageData = computed(() => {
  return editorStore.pageData
})
const id = computed(() => {
  return props.workId
})
const url = computed(() => {
  return props.workUrl
})
const channelList = ref<ChannelList[]>([])
const getChannelList = async () => {
  const result = await getChannelListAPI(id.value)
  channelList.value = result.data?.data?.list || []
}
const createChannel = async (data: ChannelList) => {
  await createChannelAPI(data)
}
const createDefaultChannel = async () => {
  if (channelList.value.length === 0) {
    const channelData: ChannelList = {
      id: id.value,
      name: '默认渠道',
      channelUrl: url.value + `?channel=${nanoid(6)}`,
    }
    await createChannel(channelData)
    await getChannelList()
  }
}
const deleteChannelHandel = async (id: string) => {
  await deleteChannelAPI(id)
  getChannelList()
}
const createChannelHandel = async () => {
  if (channelName.value.trim().length === 0) {
    message.error('请输入渠道名称')
    return
  }
  const channelData: ChannelList = {
    id: id.value,
    name: channelName.value,
    channelUrl: url.value + `?channel=${nanoid(6)}`,
  }
  await createChannel(channelData)
  getChannelList()
  channelName.value = ''
}
const publishTemplate = async () => {
  await publishWorkOrTemplateAPI({
    id: id.value,
    isTemplate: true,
  })
  message.success('发布成功')
}
const coypHandle = async (coypText: string) => {
  try {
    await copyToClipboard(coypText)
    message.success('复制成功')
  } catch (error) {
    console.log(error)
    message.error('复制失败')
  }
}
watch(
  openModal,
  (newVal) => {
    if (newVal) {
      getChannelList().then(() => {
        createDefaultChannel()
      })
    }
  },
  {
    immediate: true,
  }
)
const activeTab = ref('publish')
</script>

<style scoped>
.container {
  display: flex;
}

.left-side {
  width: 30%;
}

.right-side {
  width: 70%;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}

.cover-image {
  max-width: 100%;
  height: auto;
}

.top-section h2 {
  font-weight: 700;
}
.top-section p {
  color: #666;
}

.middle-section {
  margin-bottom: 20px;
}

.bottom-section {
  display: flex;
  align-items: center;
}

.input-field {
  flex-grow: 1;
  padding: 10px;
  margin-right: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

.submit-button {
  padding: 10px 20px;
  background-color: #1890ff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

.submit-button:hover {
  background-color: #40a9ff;
}
.tab-content-item {
  display: flex;
  align-items: center;
  padding-bottom: 5px;
  margin-bottom: 5px;
  border-bottom: 1px solid #f4f4f4;
}
.channel-name {
  font-size: 13px;
  font-weight: 700;
  color: #333;
  opacity: 0.8;
}
.tab-content-item-channel {
  flex: 1;
  padding: 0px 10px;
}
.content-item-channel-top {
  margin-bottom: 10px;
}
.content-item-channel-top,
.content-item-channel-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
